1 基础MVC

MVC即Model-View-Controller，进行系统分层的一种架构模式。

  • M即Model 指的是业务层
    该层是应用程序的主体部分，应用程序中的业务数据和业务逻辑都在该层实现。
  • V即View 指的是表示层
    该层时应用程序中显示给用户的界面，如浏览器显示的页面，桌面程序的UI等
  • C即Controller 指的是控制层
    该层用来控制表示层和业务层之间的交互，根据用户交互事件控制用户界面显示和更新Model层的数据
    他们之间的依赖关系如下：

———–>Model<—————–

| |

<——-Controller<——-View—->

即View依赖于Controller，同时View和Controller都依赖于Model

2 MVC变种

在不同的上下文中，有了不同的Controller的实现，MVC功能也有一些调整。

2.1 MVC-1：

  • M即Model 指的是业务层
    • 封装应用程序的数据
    • 代表应用程序的状态
    • 响应用户查询
    • 实现业务功能
    • 通知视图业务状态更新
  • V即View 指的是表示层
    • 显示数据
    • 接受数据更新请求
    • 发送用户数据给控制器
  • C即Controller 指的是控制层
    • 接受用户请求
    • 调用模型相应用户请求
    • 选择视图显示响应结果
      他们之间的依赖关系如下：

———–>Model<—————–

| |

<—–Controller<——->View<—->

即Model和View是双向依赖关系，View和Controller是双向依赖关系，Controller依赖于View。
流程为：View发送用户事件给Controller，Controller接收用户事件，将其转发给Model，Model处理事件，并通知View更新。
这种方式无疑增加了View和Model的耦合度，于是为了解耦，有了下面的变种。

2.2 MVC-2

  • M即Model 指的是业务层
    • 封装应用程序的数据
    • 实现业务功能
  • V即View 指的是表示层
    • 显示数据
    • 接受数据更新请求
    • 发送用户数据给控制器
  • C即Controller 指的是控制层
    • 接受用户请求
    • 调用模型相应用户请求
    • 选择视图显示响应结果
      他们之间的依赖关系如下：

———–>Model——————

| |

<—–Controller<——->View——

即View和Controller是双向依赖关系，Controller和Model之间是双向依赖关系。
流程是：用户交互事件通过Controller来操作Model，Model也通过Controller来控制数据更新。
这是分层模式想要达到的效果，真正的解耦。

2.3 MVP(Model-View-Presenter)

MVP跟MVC-2类似，仅仅是Controller被Presenter替换掉

2.4 MVVM（Model-View-ViewModel）

MVVM跟MVP类似，区别在于MVVM包含了双向数据绑定，即V上的数据变化会直接反映到（同步到）VM上，反之亦然。

3 参考资料

  1. MVVM模式原理分析及实践
  2. MVVM架构
  3. 12个JavaScript MVC框架评估
  4. Scaling Isomorphic Javascript Code
  5. MVC，MVP 和 MVVM 的图示
  6. 对MVC、MVP、MVVM的理解
  7. MVC, MVP, MVVM比较以及区别(上)
  8. JavaScript MVC框架PK：Angular、Backbone、CanJS与Ember
  9. 从Script到Code Blocks、Code Behind到MVC、MVP、MVVM
  10. JavaScript富应用MVC MVVM框架
  11. Web前端开发：为何选择MVVM而非MVC

最后更新： 2022年03月02日 03:32

原始链接： http://rawbin-.github.io/architecture/2015-03-05-mvc-architecture/

赏
× 赞赏这个人~
打赏二维码